<template>
  <node-view-wrapper class="json-placeholder">
    <span :data-key="key" style="color: red">{x}{{ key }}</span>
  </node-view-wrapper>
</template>

<script>
import { NodeViewWrapper } from '@tiptap/vue-3'

export default {
  components: {
    NodeViewWrapper,
  },
  props: {
    node: {
      type: Object,
      required: true,
    },
  },
  computed: {
    key() {
      return this.node.attrs.key
    },
  },
}
</script>

<style>
.json-placeholder {
  display: inline;
}
</style>
